<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type="text/css">

    #div1{

        width: 100px;

        height: 100px;

        text-align: center;

        line-height: 100px;

        border: 1px solid grey;

        transition: box-shadow 1s ease-in-out;

        -webkit-transition: box-shadow 1s ease-in-out;

        -moz-transition: box-shadow 1s ease-in-out;

        -o-transition: box-shawdow 1s ease-in-out;
    }

    #div1:hover
    {

        width:100px;

        height:100px;

        line-height:100px;

        text-align:center;

        box-shadow:-5px 0 12px red,0 -5px 12px yellow,0 5px 12px blue,5px 0 12px green;

    }

</style>

<body>
<div id="div1">外阴影</div>
</body>
</html>